<template>
	<view class="nav-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">
			<view class="store-info-card">
				<view class="card">
					<map class="map" :latitude="center.latitude" :longitude="center.longitude" :scale="16" :markers="markers"
						:show-location="true">
					</map>
					<view class="info">
						<view class="text">
							<view class="name">{{ name }}</view>
							<view class="addr">{{ address }}</view>
						</view>
						<button class="go-btn">导航</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动相关数据
				scrollTop: 0,
				
				// 从nearbyOil获取的加油站信息
				name: '',
				address: '',
				image: '',
				
				// 地图中心点（加油站位置）
				center: {
					latitude: 0,
					longitude: 0
				},
				
				// 我的位置（在2个加油站附近）
				myLocation: {
					latitude: 35.241,
					longitude: 113.292
				},
				
				// 地图标记
				markers: []
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			// 滚动事件处理
			onScroll(e) {
				// 可以在这里添加滚动相关的逻辑
				// 例如：滚动到顶部时显示某些元素等
			},
			
			// 初始化页面数据
			init() {
				let selected = null;
				try {
					selected = uni.getStorageSync('selectedStation') || null;
				} catch (e) {}
				
				// 从nearbyOil获取数据并映射
				if (selected && selected.latitude && selected.longitude) {
					this.name = selected.name || this.name;
					this.address = selected.address || this.address;
					this.image = selected.image || this.image;
					
					// 设置地图中心为加油站位置
					this.center = {
						latitude: Number(selected.latitude),
						longitude: Number(selected.longitude)
					};
					
					// 构建地图标记（包含我的位置和加油站位置）
					this.buildMarkers();
				}
			},
			
			// 构建地图标记
			buildMarkers() {
				this.markers = [
					// 我的位置标记
					{
						id: 0,
						latitude: this.myLocation.latitude,
						longitude: this.myLocation.longitude,
						width: 24,
						height: 24,
						iconPath: '/static/组 8.png',
						callout: {
							content: '我的位置',
							display: 'ALWAYS',
							fontSize: 12,
							color: '#333',
							padding: 6,
							borderRadius: 6
						}
					},
					// 加油站位置标记
					{
						id: 1,
						latitude: this.center.latitude,
						longitude: this.center.longitude,
						width: 28,
						height: 28,
						iconPath: '/static/椭圆 3 拷贝 2@2x.png',
						callout: {
							content: this.name || '目标加油站',
							display: 'ALWAYS',
							fontSize: 12,
							color: '#333',
							padding: 6,
							borderRadius: 6
						}
					}
				];
			}
		}
	};
</script>

<style scoped>
	.nav-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 500rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
	}

	/* 滚动容器样式 */
	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.store-info-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		margin-top: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.map {
		width: 100%;
		height: 1200rpx;
		border-radius: 22rpx;
		overflow: hidden;
	}

	.info {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.text {
		flex: 1;
		min-width: 0;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.addr {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 0;
	}

	.go-btn {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 999rpx;
		background: #2b79f5;
		color: #fff;
		border: none;
	}

	.go-btn::after {
		border: none;
	}
</style>